<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getCategoryNumberAPI } from "@/api/panel.ts";

// 初始化
const init = () => {
  const myChart = echarts.init(echart.value)
  const dataList1 = categoryList.result.map((item: any) => {
    return {
      name: item.name,
      value: item.count
    }
  })

  const options = {
    title: {},
    tooltip: {
      trigger: 'item'
    },
    grid: {
      left: 50,
      right: 50,
      top: 80
    },
    // graphic: [
    //   {
    //     type: 'image',
    //     style: {
    //       image: statePieBgImg,
    //       width: 470,
    //       height: 470
    //     },
    //     // 设置图片位置
    //     left: 44,
    //     top: 78
    //   },
    //   {
    //     type: 'image',
    //     style: {
    //       image: statePieBorderBg,
    //       width: 300,
    //       height: 470
    //     },
    //     // 设置图片位置
    //     right: 38,
    //     top: 82
    //   }
    // ],
    legend: {
      x: 230,
      y: 60,
      data: categoryList.result.map((item: any) => {
        return item.name
      }),
      orient: 'vertical',
      itemGap: 20,
      textStyle: {
        color: '#fff',
        fontSize: 10
      },
      formatter(name: string) {
        return `  ${name}`;
      }
    },
    // xAxis: {},
    // yAxis: {},
    series: [
      {
        name: '机组状态',
        type: 'pie',
        radius: ['62%', '70%'],
        center: ['35%', '50%'],
        color: [
          'rgba(245, 231, 116, 1)',
          'rgba(255, 172, 128, 1)',
          'rgba(103, 200, 255, 1)',
          'rgba(203, 255, 255, 1)',
          'rgba(70, 213, 107, 1)'
        ],
        emphasis: {
          label: {
            show: true
          }
        },
        labelLine: {
          show: false //隐藏指示线
        },
        label: {
          show: true, //隐藏标示文字
          normal: {
            show: true,
            position: 'center',
            color: '#fff',
            // text: '1111'
            formatter: `{name|文章总数}\n\n\n{num|${categoryList.total}}\n\n{unit|篇}`,
            rich: {
              name: {
                fontSize: 12,
                color: 'rgba(232, 237, 243, 1)'
              },
              num: {
                fontSize: 24,
                color: 'rgba(232, 237, 243, 1)'
              },
              unit: {
                fontSize: 12,
                color: 'rgba(232, 237, 243, 1)'
                // lineHeight: 30
              }
            }
          }
        },
        data: dataList1
      },
      {
        name: '动态饼图',
        type: 'pie',
        center: ['35%', '50%'],
        radius: ['45%', '45.3%'],
        hoverAnimation: false,
        clockWise: false,
        startAngle: 360,
        itemStyle: {
          normal: {
            color: '#00cfff'
          }
        },
        label: {
          show: false
        },
        data: _dashed()
      }
    ]
  };

  return {myChart, options}
}

let categoryList = reactive({
  total: undefined,
  result: []
})

// 获取数据
const getData = async () => {
  const res: any = await getCategoryNumberAPI()
  categoryList = res.data
}

const _dashed = () => {
  let dataArr = [];
  for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: 10,
        itemStyle: {
          normal: {
            color: 'rgb(0,0,0,0)',
          }
        }
      })
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: 20,
        itemStyle: {
          normal: {
            color: 'rgb(0,0,0,0)',
            borderWidth: 15,
            borderColor: "#00cfff"
          }
        }
      })
    }
  }
  return dataArr
}

const doing = (chart: any) => {
  const option1 = chart.getOption();
  option1.series[1].startAngle += 20
  chart.setOption(option1)
}

const startTimer = (chart: any) => {
  return setInterval(() => {
    doing(chart)
  }, 2000)
}

// 挂载的ref
const echart = ref()
onMounted(() => {
  getData().then(res => {
    const {myChart, options} = init();
    myChart.setOption(options)
    setTimeout(() => {
      startTimer(myChart)
    }, 0)
  })
})
</script>

<template>
  <div class="box center">
    <div class="box-body">
      <div class="charts" ref="echart">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;

  .box-body {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    box-shadow: 2px 1px 8px 2px rgb(123, 173, 222);
    background-color: #555162;

    .charts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
